display CSS

displayはboxがどのように動作するか決定する

用途

アイテムを新しい行に分割したくない、width と height を設定したい、padding css、margin css、Border 枠線 cssで他boxと距離を作りたい場合

例

paddingを当てられるようにし、Hit Target タッチ範囲 UIを増やす

inline-blockを当てるのは良いが、inline-flexやinline-gridはもっと便利だよ

例:子に当てていたvertical-align:centerを無くし、親に display: inline-flex;align-items: center;を付与して解決する例

など..

参考